<template>
	<view class="container">
		<block v-if="facePath==''">
			<view class="tui-flex-box">
				<view class="tui-flex" style="height: 900rpx;">
					<view class="tui-center tui-col-12" style="margin: 10upx 0px 0px 0px; padding: 0px;">
						<image @tap="chooseImage" style="width: 100%;height: 100%; align-self: center;border-radius: 10rpx;" :src="$cdn.head_example" mode="aspectFit">
					</view>
				</view>
				<view class="tui-flex">
					<view class="tui-center tui-light-green tui-col-12 color-value">
						请选择一张清晰的头像照片，才能扫描成功哦！！
					</view>
				</view>
				<view class="tui-flex">
					<view class="tui-center tui-col-12">
						<button class="btn-primary" @tap="chooseImage" hover-class="btn-hover" formType="submit" type="primary">选一张</button>
					</view>
				</view>
			</view>
		</block>
		
		<block v-else>
		<view class="tui-flex-box">
			<view class="tui-flex" >
				<view class="tui-center tui-col-12" style="margin: 10upx 0px 0px 0px; padding: 0px;">
					<image style="width: 100%; align-self: center;border-radius: 10rpx;" :src="$cdn.faceImg+facePath" mode="">
				</view>
			</view>
			
			<view class="tui-flex">
				<view class="tui-center tui-col-6 color-value-light" style="font-size: 28px;margin-bottom: 0px;padding-bottom: 0px;">{{faceValue.beauty}}分</view>
				<view class="tui-center tui-col-6 color-value-light" style="font-size: 28px;margin-bottom: 0px;padding-bottom: 0px;">{{faceValue.percent}}%</view>
			</view>
			<view class="tui-flex">
				<view class="tui-center tui-col-6 color-tip" style="padding-top: 0px; ">总颜值</view>
				<view class="tui-center tui-col-6 color-tip" style="padding-top: 0px; ">战胜全网</view>
			</view>
			
			<view class="tui-flex">
				<view class="tui-center tui-col-4 color-value" style="margin-bottom: 0px;padding-bottom: 0px;">{{ faceValue.gender=='Male'?'男':'女'}}</view>
				<view class="tui-center tui-col-4 color-value" style="margin-bottom: 0px;padding-bottom: 0px;">{{faceValue.age}}</view>
				<view class="tui-center tui-col-4 color-value" style="margin-bottom: 0px;padding-bottom: 0px;">{{faceValue.emotionStr}}</view>
				<view class="tui-center tui-col-4 color-value" style="margin-bottom: 0px;padding-bottom: 0px;">{{faceValue.ethnicityStr}}</view>
			</view>
			<view class="tui-flex">
				<view class="tui-center  tui-col-4 color-tip" style="padding-top: 0px; ">性别</view>
				<view class="tui-center tui-col-4 color-tip" style="padding-top: 0px; ">年龄</view>
				<view class="tui-center tui-col-4 color-tip" style="padding-top: 0px; ">情绪</view>
				<view class="tui-center tui-col-4 color-tip" style="padding-top: 0px; ">人种</view>
			</view>
			
			<view class="tui-flex">
				<view class="tui-center tui-col-4 color-value" style="margin-bottom: 0px;padding-bottom: 0px;">{{faceValue.skinstatus_health}}</view>
				<view class="tui-center tui-col-4 color-value" style="margin-bottom: 0px;padding-bottom: 0px;">{{faceValue.skinstatus_stain}}</view>
				<view class="tui-center tui-col-4 color-value" style="margin-bottom: 0px;padding-bottom: 0px;">{{faceValue.skinstatus_acne}}</view>
				<view class="tui-center tui-col-4 color-value" style="margin-bottom: 0px;padding-bottom: 0px;">{{faceValue.skinstatus_dark_circle}}</view>
			</view>
			<view class="tui-flex">
				<view class="tui-center  tui-col-4 color-tip" style="padding-top: 0px; ">健康值</view>
				<view class="tui-center tui-col-4 color-tip" style="padding-top: 0px; ">色斑</view>
				<view class="tui-center tui-col-4 color-tip" style="padding-top: 0px; ">青春痘</view>
				<view class="tui-center tui-col-4 color-tip" style="padding-top: 0px; ">黑眼圈</view>
			</view>
			<view class="tui-flex">
				<view class="tui-center tui-col-12 color-value" style="font-size: 30rpx;">{{faceAdvise}}</view>
			</view>
			<view class="tui-flex">
				<view class="tui-center tui-col-12">
					<button class="btn-primary" open-type="share" hover-class="btn-hover" formType="submit" type="primary">分享</button>
				</view>
			</view>
		</view>
		</block>
		
		
	</view>
</template>

<script>
	export default {
		onLoad: function(e) {
			
		},
		data() {
			return {
				$cdn:this.$cdn,
				facePath: '',
				faceValue: {},
				faceAdvise:'你的颜值很好，请继续保持哦~~'
			}
		},
		methods: {
			
			chooseImage: function(e) {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						console.log(JSON.stringify(res));
						let imgFile = res.tempFilePaths[0];
						that.uploadImg(imgFile);
					}
				});
			},
			uploadImg(imgFile) {
				this.tui
				.uploadFile('/auth/api/member/uploadFaceImg', imgFile)
				.then(resdata => {
					console.log('uploadFaceImg上传结果' + JSON.stringify(resdata));
					if (resdata.code == 0) {
						uni.setNavigationBarTitle({
							title: 'AI 测颜结果'
						});
						this.faceValue=resdata.data.faceValue;
						this.facePath=resdata.data.facePath;
					}else{
						this.tui.toast(resdata.msg);
					}
				})
				.catch(resdata => {
					console.log(resdata);
				});
			},
            faceAdviseDesc() {
                if (this.faceValue != undefined && this.faceValue.beauty > 85) {
                    return "上帝给了天使的容颜，可以刷脸~~";
                } else if (this.faceValue != undefined && this.faceValue.beauty > 70) {
                    return "你的颜值很好，请继续保持哦~~";
                } else if (this.faceValue != undefined && this.faceValue.beauty > 50) {
                    return "我是一个普通人，但是我很努力~~";
                } else if (this.faceValue != undefined && this.faceValue.beauty > 30) {
                    return "怎么肥四，颜值分不对哦，但是我有内涵哈~~";
                } else {
                    return "有点像外星人，地球人写的程序无法识别哈哈~~";
                }
            }
		}
	}
</script>

<style>
	@import '../../static/style/thorui.css';
.color-tip{
	color: gray;
}
.color-value{
	color: #5677FC;
	font-weight: bold;
}
.color-value-light{
	color: #5677FC;
}
	.tui-flex-box {
		padding: 0 30upx 80upx 30upx;
		box-sizing: border-box;
		font-size: 30upx;
	}

	.tui-center {
		padding: 18upx 0;
		margin-bottom: 12upx;
	}

	.mr {
		margin-right: 30upx
	}
</style>
